<template>
	<view>
		<image mode="widthFix" class="images" :src="$IMG_URL+'/uploads/20241218/d16be70284454c3dcd62e8a324deac4e.png'">
		</image>
		<navbar ></navbar>
		<view class="kmbg ">
			<view style="background: #fff;padding: 15px 10px;border-radius: 20rpx;">

				<view class="flex-ju-b">
					<view :style="{background:item.count?'#C8FAD0':''}" v-for="(item,index) in signlist" :key="index" v-if="index<4" class="tian flex1 flex-ju-c">
						{{item.title}}
						<image v-if="item.count" mode="widthFix" class="imagemang image" src="/static/mangs.png"></image>
						<image v-else mode="widthFix" class="imagemang image " :src="item.image"></image>
					</view>
				</view>

				<view class="flex-ju-b mt10">
					<view :style="{background:item.count?'#C8FAD0':''}" v-for="(item,index1) in signlist" :key="index1" v-if="index1>3&&index1<7" class="tian flex1 flex-ju-c">
						{{item.title}}
						<image v-if="item.count" mode="widthFix" class="imagemang image" src="/static/mangs.png"></image>
						<image v-else mode="widthFix" class="imagemang image" :src="item.image"></image>
					</view>
					
					<!-- <view class="tian flex1 flex-ju-c">
						第1天
						<image mode="widthFix" class="imagemang" src="/static/mang.png"></image>
					</view>
					<view class="tian flex1 flex-ju-c">
						第1天
						<image mode="widthFix" class="imagemang" src="/static/mang.png"></image>
					</view> -->
				</view>

				<view @click="tapqiandao" class="butdao flex-ju-c mt20">
					签到
				</view>
				
			</view>
			
			<view class="mt15" style="background: #fff;padding: 15px 10px;border-radius: 20rpx;">
				<view class="">我的签到记录</view>
				
				<view class="flex-ju-b mt15" v-for="(item,k) in history" :key="k">
					<view class="flex-a-i">
						<view class="coshus flex-ju-c">
							<image mode="widthFix" style="width: 70rpx;" class="flex" :src="item.image"></image>
						</view>
						<view class="ml10">
							<view class="jusnsd">{{item.gif_id_cn}}</view>
							<view class="color999 mt5 size24">{{item.createtime}}</view>
						</view>
					</view>
					<!-- <view class="dsss">待使用</view> -->
				</view>
				
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				signlist:[],
				history:[]
			}
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			getlist(){
				uni.showLoading()
				this.$http('v1.signlist', {
				}).then((res) => {
					if (res.code == 1) {
						if(res.data.user.count > 7){
							res.data.user.count = 7
						}
						for(var i=0;i<res.data.user.count;i++){
							res.data.list[i].count = 1
						}
						
						this.signlist = res.data.list
						this.history = res.data.user.history
						uni.hideLoading()
					}
				})
			},
			tapqiandao(){
				uni.showLoading()
				this.$http('v1.usersign', {
				}).then((res) => {
					if (res.code == 1) {
						uni.showToast({
							title:"签到成功",
							icon:"none"
						})
						setTimeout(()=>{
							this.getlist()
						},700)
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background: #ECF6FB;
	}
	.dsss{
		color:#7BEA8C;
	}
	.jusnsd{
		font-size: 28rpx;
	}
	.size24{
		color:#999999;
		font-size: 24rpx;
	}
	.coshus{
		width: 100rpx;
		height: 100rpx;
		
		border-radius: 10rpx;
		background: #ECF6FB;
	}
.butdao{
	color:#fff;
	font-size: 32rpx;
	height:100rpx;
	border-radius: 20rpx;
	background-image: linear-gradient(#85ee98, #49d956);
}
	.imagemang {
		width: 70rpx;
		margin-top: 15px;
	}

	.tian {
		flex-direction: column;
		display: flex;
		background: #ECF6FB;
		margin-left: 5px;
		margin-right: 5px;
		border-radius: 16rpx;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.kmbg {
		position: relative;
		padding: 12px;
		padding-top: 350rpx;
	}

	.images {
		width: 100%;
		position: absolute;
		top: 0;
	}
</style>